<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6模块与CommonJS模块的差异</title>
</head>
<body>
    <h1>ES6模块与CommonJS模块的差异</h1>

    <script type="module">
        // ES6模块
        // lib.js
        export let counter = 3;
        export function incCounter() {
            counter++;
        }

        // main.js
        import { counter, incCounter } from './lib.js';
        console.log(counter); // 3
        incCounter();
        console.log(counter); // 4

        // CommonJS模块（仅作为示例，浏览器中不能直接运行）
        /*
        // lib.js
        var counter = 3;
        function incCounter() {
            counter++;
        }
        module.exports = {
            counter: counter,
            incCounter: incCounter
        };

        // main.js
        var mod = require('./lib');
        console.log(mod.counter);  // 3
        mod.incCounter();
        console.log(mod.counter);  // 3
        */

        // 主要差异示例
        // 1. 静态性
        // ES6模块
        import { foo } from './module.js'; // 必须在顶层
        
        // CommonJS
        // if (condition) {
        //     const module = require('./module.js'); // 可以在任何位置
        // }

        // 2. 值的复制与动态引用
        // ES6模块输出的是值的动态引用
        export let value = 1;
        setTimeout(() => value = 2, 500);

        // 3. this指向
        console.log(this === undefined); // true

        // 4. 循环加载
        // a.js
        import { bar } from './b.js';
        export function foo() {
            console.log('foo');
            bar();
            console.log('执行完毕');
        }

        // b.js
        import { foo } from './a.js';
        export function bar() {
            console.log('bar');
            if (Math.random() > 0.5) {
                foo();
            }
        }
    </script>
</body>
</html> 